<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import type { Ref } from 'vue'
import { useUserStore } from '@/stores'

const userStore = useUserStore()

const changeTheme = () => {
  userStore.changeTheme()
}
</script>

<template>
  <div class="homePage">
    <n-Button @click="changeTheme">
      {{ userStore.isDark === false ? '切换黑暗模式' : '切换明亮模式' }}
    </n-Button>
  </div>
</template>

<style scoped lang="scss">
.homePage {
  margin: 0;
  height: 100%;
  $head-height: 100px;
  $footer-height: 124px;
  $main-height: calc(100vh - $head-height - $footer-height);
  .n-layout {
    .n-split {
      height: $main-height;
      .n-layout-sider {
        height: 100%;
        .n-split {
          .sider-top {
            margin-top: 20px;
          }
        }
      }
    }
  }
}
</style>
